<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<#include "/common/common_head.ftl">
	<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
	<script type="text/javascript">
		function showCount(id){
			$.ajax({
          type : "post",
          dataType : "json",
          url : "getOptionCount.do",
          data : "id=" + id,
          success:function(result){
             	var answerList = result.data;
             	var countBody = $('#countOptionList');
             	countBody.empty();
              var colors = Highcharts.getOptions().colors,name='答案数量统计图';
              var categories = [];
              var data = [];
              for(var i = 0; i < answerList.length; i++){
             	var answer = answerList[i];
                categories.push(answer[0]);
                var dataObj = new Object();
                dataObj.y = answer[1];
                dataObj.color = colors[i];
                data.push(dataObj);
             		var row =  $("<tr></tr>");
             		var td1 =  $("<td></td>");
             		td1.append(i+1);
             		row.append(td1);
             		var td2 =  $("<td></td>");
             		td2.append(answer[0]);
             		row.append(td2);
             		var td3 =  $("<td></td>");
             		td3.append(answer[1]);
             		row.append(td3);
             		countBody.append(row);
             	}
              var chart =  $('#container').highcharts({
                  chart: {
                      type: 'column'
                  },
                  title: {
                      text: '中麦通信语音奖励调查'
                  },
                  subtitle: {
                      text: ''
                  },
                  xAxis: {
                      categories: categories
                  },
                  yAxis: {
                      title: {
                          text: '答案数量'
                      }
                  },
                  plotOptions: {
                      column: {
                          cursor: 'pointer',
                          point: {
                              events: {
                                  click: function() {
                                     
                                  }
                              }
                          },
                          dataLabels: {
                              enabled: true,
                              color: colors[0],
                              style: {
                                  textShadow: '0 0 -1px #000000, 0 0 3px #000000'
                              },
                              formatter: function() {
                                  return this.y;
                              }
                          }
                      }
                  },
                  tooltip: {
                      formatter: function() {
                          var point = this.point,
                              s = this.x +':<b>'+ this.y +'</b><br/>';
                          // if (point.drilldown) {
                          //     s += 'Click to view '+ point.category +' versions';
                          // } else {
                          //     s += 'Click to return to browser brands';
                          // }
                          return s;
                      }
                  },
                  series: [{
                      name: name,
                      data: data,
                      color: 'white'
                  }],
                  exporting: {
                      enabled: false
                  }
              }).highcharts(); 
              $('#myModal').modal('show');
          },
          error:function(data) {
              alert("抱歉，添加失败 ，请您重试。");
              return false;
          }
      });
		}
	</script>
</head>
<style>
	.tooltip{
		width:500px;
	}
	.tooltip-inner{
		max-width:490px;
		text-align:left;
	}
	.modal{
		top: 75px;
	}
	.modal-dialog{
		width: 677px;
	}
	.modal-content{
		width: 800px;
	}
</style>
<body style="padding-top: 0px;">
	<!-- <!-- 主内容区域 S -->
 	<div class="" id="mainBoard">
		<!-- 导航路径 S -->
		<ol class="breadcrumb">
		  <li><a href="#">问卷调查问题</a></li>
		  <li class="active">问卷调查问题列表</li>
		</ol>
		<!-- 导航路径 E -->

	   	<!-- 标题区 S -->
		<h2 class="sub-header">${questionnaire.title}问题列表</h2>
		<!-- 标题区 E -->

        <div class="container-fluid">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="edit.do?page=${currentPage}&questionnaireId=${questionnaire.id}">添加</a></li>
          </ul>
        </div>
        <div class="table-responsive">
         <table class="table table-striped">
          	<thead>
                <tr>
				  <th></th>
                  <th>问题内容</th>
                  <th>问题类型</th>
                  <th>显示顺序</th>
                </tr>
             </thead>
             <tbody>
             <#if lists ??>
              <#list lists as entity >
                <tr>
					<td>
						${(currentPage?number)*10 + (entity_index+1)}
					</td>
					<td>
						${entity.content?if_exists}
					</td>
					<td>
						<#if entity.type == 1>单选</#if>
						<#if entity.type == 2>多选</#if>
						<#if entity.type == 3>用户输入</#if>
					</td>
					<td>
						${entity.sequence?if_exists}
					</td>
	              	<td>
		              	<a href="edit.do?id=${entity.id}&page=${currentPage}">Edit</a>,
		              	<a href="del.do?id=${entity.id}&page=${currentPage}&questionnaireId=${entity.questionnaireId}" onclick="if(confirm('确定删除吗?')==false) return false;">Del</a>,
		              	<a href="#" onclick="showCount(${entity.id})">Count</a>
	              	</td>
              	</tr>
              </#list>
             </#if>
             </tbody>
         </table>
       </div>
       <!-- 分页条start -->
		<style>
			.pager li > a, .pager li > span {
	    		border-radius:9px;
			}
		</style>
		<nav>
			 <ul class="pager">
				<li>总记录数:<a href="#">${totalNum}</a></li>
				<li>/总页数:<a href="#">${totalPageNum}</a></li>
				<li>/当前页:<a href="#">${currentPage+1}</a></li>
				<#if currentPage < totalPageNum-1>
					<#if currentPage==0>
					<li><a href="list.do?page=${currentPage+1}&questionnaireId=${questionnaire.id}">下一页</a></li>
					<#else>
					<li><a href="list.do?page=${currentPage-1}&questionnaireId=${questionnaire.id}">上一页</a></li>
					<li><a href="list.do?page=${currentPage+1}&questionnaireId=${questionnaire.id}">下一页</a></li>
					</#if>
				</#if>
				<#if currentPage == totalPageNum-1>
					<#if totalPageNum != 1>
					<li><a href="list.do?page=${currentPage-1}&questionnaireId=${questionnaire.id}">上一页</a></li>
					</#if>
				</#if>
			 </ul>
		</nav>
		<!-- 分页条end -->
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
       aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal" aria-hidden="true">
                      &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                   选项统计结果
                </h4>
             </div>
             <div class="modal-body">
             	<div class="table-responsive">
		         <table class="table table-striped">
		          	<thead>
		                <tr>
						  <th>序号</th>
		                  <th>选项内容</th>
		                  <th>统计结果</th>
		                </tr>
		             </thead>
		             <tbody id="countOptionList">
		             </tbody>
		           </table>
               <div id="container" style="min-width:700px;height:400px"></div>
             </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-default" 
                   data-dismiss="modal">关闭
                </button>
             </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal -->
 	</div>
</body>
</html>